<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 选中的是div的第一个儿子p元素(按照所有兄弟计算的) */
      /* div > :first-child {
        color: red;
      } */

      /* 最后一个p元素 */
      /* div > p:last-child {
        color: red;
      } */

      /* 第n个儿子 */
      /* div > p:nth-child(3) {
        color: red;
      } */

      /* 偶数 even*/
      /* div > p:nth-child(2n) {
        color: red;
      } */

      /* 奇数 odd*/
      /* div > p:nth-child(2n + 1) {
        color: red;
      } */

      /* 选中前5个 ()里面的式子必须是 an+b的形式*/
      /* div > p:nth-child(-n + 5) {
        color: red;
      } */

      /* 这个意思是，选中div下的 第一个这样的元素，哪样的？ p这样的元素 同类型的*/
      /* div > p:first-of-type {
        color: red;
      }

      div > p:last-of-type {
        color: skyblue;
      } */

      /* ntf-of-type 这种就不会受干扰，直接选div下的p元素的第几个，数就可以了  同类型的*/
      div > p:nth-of-type(4) {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <span>测试1</span>
      <p>张三：98分</p>
      <p>李四：88分</p>
      <p>王五：78分</p>
      <p>赵六：68分</p>
      <p>孙七：58分</p>
      <p>老八：48分</p>
      <span>测试2</span>
    </div>
  </body>
</html>
